<template>
   <!-- 评价 -->
   <view class="comment">
		<view class="eva-section istop">
		   <view class="star-show">
			   <text class="pingfen">评分</text>
			   <uni-rate :value="value"  color="#fff" active-color="#F0406F" size="16" v-if="value!=0"/>
			   <text class="num">{{goodComment}}%好评</text>
		   </view>
			<view class="e-header">
				<text class="tit" :class="level==0?'active':''" @click="changeLevel(0)">全部评论（{{modelsCount}}）</text>
				<text class="level" :class="level==3?'active':''" @click="changeLevel(3)">优</text>
				<text class="level" :class="level==2?'active':''" @click="changeLevel(2)">中</text>
				<text class="level" :class="level==1?'active':''" @click="changeLevel(1)">差</text>
			</view> 
		</view>
		<scroll-view scroll-y="true" class="scrollBox">
			<view class="eva-section" v-for="c in commentLevel" :key="c.id">
					<view class="eva-box">
					<image class="portrait" :src="getImg(c)" mode="aspectFill"></image>
					<view class="right">
						<text class="name" v-if="!c.isAnonymous">******</text>
						<text class="name" v-if="c.isAnonymous">{{c.cMemberName}}</text>
						<text class="desc">{{c.dTime}} {{c.cProductName}} </text>
						
					</view>
					</view>
					<view class="size">
						<text class="con">{{c.cComment}}</text>
					</view>
					<view class="image-box" v-if="c.commentPics">
						<image :src="c.commentPics"></image>
						
					</view>
			</view>
		</scroll-view>
		
		
			
			
	 
   </view>

</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
    export default {
		components: {
			uniRate
		},
        data(){
            return {
                commentList:[],
				modelsCount:0,
				pageIndex:1,
				pageSize:20,
				level:0,
				value:''
            }
        },
		onLoad(options) {
			let id = options.id
			this.$Request.get(this.$api.httpApi.goods.Comments +
				'&productID=' + id + '&type=2' + '&commentStatus=0'+'&pageIndex='+this.pageIndex+'&pageSize='+this.pageSize+'&isFront=true' +
				'&startLevel=null' + '&token=' + this.$SysCache.get('token')).then(res => {
				if (res.code == 200) {
					this.commentList = res.data.models
					this.modelsCount = res.data.modelsCount
					
					let good = 0
					this.commentList.forEach(item=>{
						if(item.iStars != 1){
							good ++
						}
					})
					
					this.value = good/this.modelsCount*5
				}
			})
		},
		computed:{
			goodComment:function(){
				let good = 0
				this.commentList.forEach(item=>{
					if(item.iStars != 1){
						good ++
					}
				})
				if(this.modelsCount == 0){
					return 0
				}else{
					return (good/this.modelsCount*100).toFixed(2)
					}
			},
			commentLevel:function(){
				let arr = []
				this.commentList.forEach(item=>{
					if(this.level == 0){
						arr.push(item)
					}
					if(this.level == 1){
						if(item.iStars == 1){
							arr.push(item)
						}
					}
					if(this.level == 2){
						if(item.iStars == 2||item.iStars == 3){
							arr.push(item)
						}
					}
					if(this.level == 3){
						if(item.iStars == 4||item.iStars == 5){
							arr.push(item)
						}
					}
				})
				return arr
			}
		},
		methods:{
			getImg(item){
				return item.cProductDefaultImg
			},
			changeLevel(level){
				this.level = level
			}
			
		}
      

    }
</script>

<style lang="scss">
	/* 评价 */
	page{
		background: $page-color-base;
		padding-bottom: 160upx;
	}
	.comment{
		// display: flow-root;
		display: flex;
		flex-direction: column;
	}
	.istop{
		position: fixed;
		top: 44px;
		left: 0;
		right: 0;
		width: 100%;
		height: 90px;
		z-index: 100;
	}
	.eva-section{
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-bottom: 16upx;
		clear: both;
	
		.space{
			background: $page-color-base;
			height: 20upx;
		}
		.e-header{
			display: flex;
			align-items: center;
			margin-top: 23upx;
			.tit{
				padding: 15upx 18upx;
				font-size:23upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(102,102,102,1);
				background:rgba(255,255,255,1);
				border:1upx solid rgba(153, 153, 153, 1);
				border-radius:28upx;
				display: inline-flex;
				justify-content: center;
				align-items: center;
			}
			.active{
				border:1upx solid rgba(77, 200, 151, 1)!important;
				color:rgba(77,200,151,1)!important;
			}
			.level{
				width:100upx;
				height:55upx;
				background:rgba(255,255,255,1);
				border:1upx solid rgba(153, 153, 153, 1);
				border-radius:28upx;
				font-size:23upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(102,102,102,1);
				display: inline-flex;
				justify-content: center;
				align-items: center;
				margin-left: 43upx;
			}
			
			.icon-you{
				margin-left: 10upx;
			}
		}
		.star-show{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size:25upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(102,102,102,1);
			.uni-rate{
				margin: 5upx 20upx 0 20upx;
			}
			
		}
		
	}
	.scrollBox{
		display: block;
		margin-top: 180upx;
		z-index: 10;
	}
	.eva-box{
		display: flex;
		padding: 20upx 0;
		.portrait{
			flex-shrink: 0;
			width: 59upx;
			height: 59upx;
			border-radius: 50%;
		}
		.right{
			flex: 1;
			// display: flex;
			/* flex-direction: column; */
			font-size:23upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(68,68,68,1);
		
			padding-left: 26upx;
			align-items: center;
			.name{
				display: block;
				line-height:50upx;
			}
			.desc{
				display: block;
				font-size:21upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:rgba(143,143,143,1);
				// line-height:84upx;
			}
		}
		
	}
	
	
	.size{
		.con{
			font-size:21upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(102,102,102,1);
			line-height:1;
		}
	
	}
	.image-box{
		margin-top: 20upx;
		:nth-child(3n){
			margin-right: 0;
		}
		image{
			width:220upx;
			height:159upx;
			border-radius:5upx;
			margin-right: 15upx;
		}
		
	}
</style>
